<!--新页面模板-->
<template>
  <!--  挂牌督办-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <div class="page_filter">
            <el-select v-model="form.checkStatus" filterable clearable placeholder="请选择状态">
              <el-option
                v-for="item in EnumSuperviseCheckStatusList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <!-- 是否授权-->
            <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
          </div>
          <div class="page_main">
            <button class=" common_btn-defalut" style="margin-bottom: 20px" @click="add">添加督办</button>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table :data="tableList" border>
              <el-table-column label="序号" width="70">
                <template slot-scope="scope">
                  {{getIndex(scope.$index)}}
                </template>
              </el-table-column>
              <el-table-column prop="superviseDeptId" show-overflow-tooltip min-width="140"
                               label="督办方"></el-table-column>
              <el-table-column prop="deptName" show-overflow-tooltip min-width="160" label="被督办方"></el-table-column>
              <el-table-column prop="damageNameList" min-width="160" label="整改灾害点"></el-table-column>
              <el-table-column prop="checkStatusName" width="120" label="状态">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.checkStatus | gradeStatusColor" style="color: white">
                    {{scope.row.checkStatusName}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" width="140" label="下达日期">
                <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
              </el-table-column>
              <el-table-column prop="updateTime" width="140" label="更新日期">
                <template slot-scope="scope">{{scope.row.updateTime | formatTimer}}</template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="240">
                <template slot-scope="scope">
                  <button class="btn_prohibit" @click="checkDetail(scope.row)">查看轨迹</button>
                  <button class="btn_edit" @click="viewDetails(scope.row,false)">查看详情</button>
                  <button class="btn_add" v-if="scope.row.checkStatus==5"
                          @click="viewDetails(scope.row,true)">销号审核
                  </button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
              :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"

              :total="form.total">
            </el-pagination>
          </div>
          <!--添加督办-->
          <el-drawer
            title="添加督办"
            :visible.sync="newForm"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            size="50%">
            <div class="demo-drawer__content">
              <el-form ref="form" label-position="right" :rules="rules" :model="currentRow" label-suffix="："
                       label-width="140px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="选择被督办单位" prop="deptTreeId">
                      <organization
                        v-model="currentRow.deptTreeId"
                        placeholder="选择被督办单位"
                        @change="changeDeptOrganization"
                      ></organization>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="选择灾害所在路线" prop="roadId">
                      <el-select v-model="currentRow.roadId" filterable clearable placeholder="请选择路线"
                                 @change="changeRoad" @focus="getDamagePointList('roadId')">
                        <el-option
                          v-for="item in roadList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="灾害点" prop="damageId">
                  <el-select
                    @focus="getDamagePointList"
                    v-model="currentRow.damageIdList"
                    filterable
                    multiple
                    clearable
                    placeholder="可选择多个灾害点">
                    <el-option
                      v-for="item in damageList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="整改截止日期" prop="checkTime">
                  <el-date-picker
                    style="width: 30%"
                    v-model="currentRow.checkTime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="整改要求" prop="explanation">
                  <el-input v-model="currentRow.advice" type="textarea"
                            :autosize="{ minRows: 3, maxRows: 4 }"
                            placeholder="描述整改要求内容"></el-input>
                </el-form-item>
                <el-form-item label="督办内容" prop="explanation">
                  <el-input v-model="currentRow.explanation"
                            type="textarea"
                            :autosize="{ minRows: 3, maxRows: 4 }"
                            placeholder="描述督办内容"></el-input>
                </el-form-item>
                <el-form-item label="督办通知书" prop="fileList" class="file_table">
                  <upload-file v-model="currentRow.fileList" ref="uploadClear"></upload-file>
                  <el-table border :data="currentRow.fileList" style="height: 200px;overflow: auto">
                    <el-table-column label="序号" width="70">
                      <template slot-scope="scope">
                        {{getIndex(scope.$index)}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="文件名称"></el-table-column>
                    <el-table-column label="文件备注说明">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-input
                            v-model.trim="scope.row.info"
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 3 }"
                            placeholder="可对文件进行简要描述"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-form>
            </div>
            <div class="demo-drawer__footer">
              <el-button class="common_btn-white" @click="newForm = false">取消</el-button>
              <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
            </div>
          </el-drawer>
          <!--时间轴-->
          <el-drawer
            title="查看轨迹"
            :visible.sync="timeline"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="40%">
            <div class="demo-drawer__content time_line">
              <el-timeline style="height: 800px;overflow: auto">
                <el-timeline-item
                  v-for="(item, index) in timelineData"
                  :key="index"
                  color="#0bbd87"
                  :timestamp="item.time | formatTimer"
                  placement="top">
                  <el-card>
                    <el-row :gutter="10">
                      <el-col :span="8">
                        <p class="status">
                          <el-tag size="medium" :style="item.status | gradeStatusColor" effect="dark"
                                  style="color: white">
                            {{item.statusName}}
                          </el-tag>
                        </p>
                        <p class="info" v-if="item.explanation">说明：{{item.explanation}}</p>
                      </el-col>
                      <!--相关文件-->
                      <el-col :span="16">
                        <el-alert
                          :closable="false" title="相关文件，可点击下载" type="info" show-icon>
                        </el-alert>
                        <a v-for="file in item.fileList" :key="file.url" style="color: #1990FE;text-align: left"
                           :href="constUrl + file.url"
                           :download="file.name">
                          <p style="font-size: 20px"><i class="el-icon-document"></i>
                            <span style="font-size: 12px">{{file.name}}</span>
                            <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>

                        </a>
                        <div style="color:grey;text-align: center;line-height: 50px" v-if="item.fileList.length < 1">
                          没有文件...
                        </div>
                      </el-col>
                    </el-row>

                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-drawer>
          <!--查看详情-->
          <el-drawer
            :title="titleInfo"
            :visible.sync="detailShow"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="50%">
            <div class="demo-drawer__content s-detail" style="margin-top: 10px">
              <el-card style="height: 95%;overflow: auto">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-divider content-position="left">基本信息</el-divider>
                    <ul style="padding: 10px">
                      <li>被督办方：<span>{{currentRow.deptName}}</span></li>
                      <li>当前状态：<span>{{currentRow.checkStatusName}}</span></li>
                      <li>整改截止日期：<span> {{currentRow.createTime | formatTimer}}</span></li>
                      <li>整改要求：<span> {{currentRow.advice}}</span></li>
                      <li>督办内容：<span> {{currentRow.explanation}}</span></li>
                    </ul>
                    <!--销号审核-->
                    <div v-if="examine" style="margin-top: 50px;">
                      <el-divider content-position="left">销号审核</el-divider>
                      <el-radio-group style="margin-top: 20px" v-model="currentRow.checkStatus">
                        <el-radio-button
                          v-for="item in examineList"
                          :key="item.code"
                          :label="item.code">
                          {{ item.name }}
                        </el-radio-button>
                      </el-radio-group>
                      <el-input
                        style="margin-top: 20px"
                        v-if="currentRow.checkStatus === 7"
                        v-model.trim="currentRow.rejectReason"
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 6 }"
                        placeholder="请输入销号驳回理由"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <el-divider content-position="left">相关附件</el-divider>
                    <!--督办通知书-->
                    <div class="file_view">
                      <el-alert
                        :closable="false" title="督办通知书，可点击下载" type="info" show-icon>
                      </el-alert>
                      <a v-for="file in currentRow.checkFileList" :key="file.url"
                         style="color: #1990FE;text-align: left"
                         :href="constUrl + file.url"
                         :download="file.name">
                        <p style="font-size: 20px"><i class="el-icon-document"></i>
                          <span style="font-size: 12px">{{file.name}}</span>
                          <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>
                      </a>
                      <div style="color:grey;text-align: center;line-height: 50px"
                           v-if="currentRow.checkFileList.length < 1">
                        没有文件...
                      </div>
                    </div>
                    <!--整改方案-->
                    <div class="file_view">
                      <el-alert
                        :closable="false" title="整改方案相关附件，可点击下载" type="info" show-icon>
                      </el-alert>
                      <a v-for="file in currentRow.fileList" :key="file.url" style="color: #1990FE;text-align: left"
                         :href="constUrl + file.url"
                         :download="file.name">
                        <p style="font-size: 20px"><i class="el-icon-document"></i>
                          <span style="font-size: 12px">{{file.name}}</span>
                          <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>
                      </a>
                      <div style="color:grey;text-align: center;line-height: 50px"
                           v-if="currentRow.fileList.length < 1">
                        没有文件...
                      </div>
                    </div>
                    <!--整改验收文件-->
                    <div class="file_view">
                      <el-alert
                        :closable="false" title="整改验收相关附件，可点击下载" type="info" show-icon>
                      </el-alert>
                      <a v-for="file in currentRow.finishFileList" :key="file.url"
                         style="color: #1990FE;text-align: left"
                         :href="constUrl + file.url"
                         :download="file.name">
                        <p style="font-size: 20px"><i class="el-icon-document"></i>
                          <span style="font-size: 12px">{{file.name}}</span>
                          <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>
                      </a>
                      <div style="color:grey;text-align: center;line-height: 50px"
                           v-if="currentRow.finishFileList.length < 1">
                        没有文件...
                      </div>
                    </div>
                    <!--销号申请-->
                    <div class="file_view">
                      <el-alert
                        :closable="false" title="销号申请相关附件，可点击下载" type="info" show-icon>
                      </el-alert>
                      <a v-for="file in currentRow.responseFileList" :key="file.url"
                         style="color: #1990FE;text-align: left"
                         :href="constUrl + file.url"
                         :download="file.name">
                        <p style="font-size: 20px"><i class="el-icon-document"></i>
                          <span style="font-size: 12px">{{file.name}}</span>
                          <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>
                      </a>
                      <div style="color:grey;text-align: center;line-height: 50px"
                           v-if="currentRow.responseFileList.length < 1">
                        没有文件...
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </div>
            <div class="demo-drawer__footer">
              <el-button class="common_btn-white" @click="detailShow = false">取消</el-button>
              <el-button v-if="examine" class="common_btn-defalut" type="primary" @click="updates()">确定</el-button>
              <el-button v-else class="common_btn-defalut" type="primary" @click="detailShow = false">确定</el-button>
            </div>
          </el-drawer>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import UploadFile from '@/components/upload-file'
import Organization from '@/components/organization-unit/all'
import {
  superviseAdd,
  getSuperviseList,
  superviseUpdate,
  getTimeTree
} from '@/services/model/supervise'
import {
  getRoadSelectList,
  getDamageSelectList
} from '@/services/model/road-mgmt'
import OrganizationTree from '@/components/organization-tree/all'
import constUrl from '@/services/env'
import Enums from '@/utils/enums'
import Format from '@/utils/format'

export default {
  mixins:[Enums],
  components: {
    UploadFile,
    Organization,
    OrganizationTree
  },
  data() {
    return {
      titleInfo: '查看详情',
      EnumSuperviseCheckStatusList: [],
      rules: {
        deptTreeId: {required: true, message: '请选择管养单位'},
        damageIdList: {required: true, message: '请选择灾害点'},
      },
      examine: false,
      examineList: [
        {name: '审核通过', code: 6},
        {name: '销号驳回', code: 7},
      ],
      roadList: [],
      currentRow: {
        fileList: [],
        responseFileList: [],
        finishFileList: [],
        checkFileList: [],
      },
      timelineData: {},
      damageList: [],
      deptTree: {
        breadList: [],//面包屑
        deptTreeId: '',
      },
      constUrl,
      tableList: [],
      form: {
        page: 1,
        pageSize: 10,
      },
      newForm: false,
      updateForm: false,
      timeline: false,
      detailShow: false,
      isLook: true,
    }
  },
  watch: {},
  filters: {
    gradeStatusColor(val) {
      switch (val) {
        case 1:
          return 'background-color:#0073b7'
        case 2:
          return 'background-color:#03a9f4'
        case 3:
          return 'background-color:#ff851b'
        case 4:
          return 'background-color:#3f51b5'
        case 5:
          return 'background-color:#0073b7'
        case 6:
          return 'background-color:#0DC26B'
        default:
          return 'background-color:#e43321'
      }
    },
    formatTimer(timer) {
      if (timer) {
        return Format(new Date(timer), 'yyyy年MM月dd日')
      }
      return ''
    },
  },
  computed: {},
  methods: {
    //查看详情
    viewDetails(row, examine) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.examine = examine
      this.titleInfo = examine ? '销号审核' : '查看详情'
      this.currentRow.checkStatus = examine ? 6 : this.currentRow.checkStatus
      this.detailShow = true
    },
    async checkDetail(row) {
      let {data} = await getTimeTree({id: row.id})
      this.timelineData = data || []
      this.timeline = true
    },
    // 表单严重
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit()
        }
      })
    },
    async updates() {
      let res = await superviseUpdate(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '更新成功'
        })
        this.detailShow = false
        this.queryList()
      }
    },
    // 添加督办提交
    async submit() {
      let res = await superviseAdd(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '添加成功'
        })
        this.newForm = false
        this.queryList()
      }
    },
    //查询灾害点列表
    async changeRoad() {
      this.$set(this.currentRow, 'damageId', '');
      this.damageList = [];
      let {data} = await getDamageSelectList(this.currentRow)
      this.damageList = data
    },
    // 弹窗里面获取路线
    async changeDeptOrganization() {
      this.$set(this.currentRow, 'roadId', '');
      this.$set(this.currentRow, 'damageId', '');
      this.roadList = []
      this.damageList = []
      const {data} = await getRoadSelectList({deptId: this.currentRow.deptTreeId})
      this.roadList = data
    },
    getDamagePointList(item) {
      if (!this.currentRow.deptTreeId) {
        this.$message('请先选择管养单位');
        return
      }
      if (item !== 'roadId' && !this.currentRow.roadId) {
        this.$message('请先选择路线');
        return
      }
    },
    // 新增养
    add() {
      this.newForm = true
      this.currentRow = {
        fileList: [],
        responseFileList: [],
        finishFileList: [],
        checkFileList: [],
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      })
    },
    //面包屑跳转
    breadClick(deptTreeId) {
      this.$refs.deptTree.changeBread(deptTreeId)
    },
    //组织机构组件回调
    selectOrgHandel() {
      this.$forceUpdate()
      this.form.deptTreeId = this.deptTree.deptTreeId
      this.queryList()
    },
    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    async queryList() {
      this.form.superviseType = 1
      let res = await getSuperviseList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
  },
  mounted() {
    this.queryDictList(['EnumSuperviseCheckStatus'], ['EnumSuperviseCheckStatusList'])
  },
  activated() {

  },
}


</script>
<style scoped="scoped" lang="less">
  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }
  .file_table {
    /deep/ .el-table th, td {
      padding: 0px 0px;
    }

    .el-form-item__content {
      height: 10px !important;
    }
  }

  /deep/ .demo-drawer {

    .demo-drawer__content {
      margin-top: 20px;
      width: 96%;
      height: 90%;
    }

    .demo-drawer__footer {
      bottom: 4%;
    }
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #1b1b1b;
    font-weight: bold;
    font-size: 15px;
    color: #1990FE;
  }

  .s-detail {
    /deep/ .el-button {
      border: 1px solid #DCDFE6 !important;
    }
  }

  .s-detail ul li span {
    font-weight: normal;
    font-size: 12px;
    color: #1b1b1b;
  }

  .file_view {
    padding: 10px;
    min-height: 80px;
  }

  .time_line {
    .info {
      margin-top: 10px;
      margin-left: 10px;
      font-size: 14px;
      color: #8c939d;
    }
  }
</style>
